<template>
  <div class="Layout">
    <svg width="100%" height="500px" viewBox="0 0 187.3 93.7" preserveAspectRatio="xMidYMid meet">
      <path id="outline" stroke="#ededed"  fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"/>
      <circle id="rect" r="4" fill="skyblue">
        <animateMotion begin="0s" dur="3s" repeatCount="indefinite">
          <mpath xlink:href="#outline"></mpath>
        </animateMotion>
      </circle>
  </svg>
    <div class="Code">&lt;id="outline" stroke="#ededed"  fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"/>
&lt;circle id="rect" r="4" fill="skyblue">
  &lt;animateMotion begin="0s" dur="3s" repeatCount="indefinite">
    &lt;mpath xlink:href="#outline"></mpath>
  &lt;/animateMotion>
&lt;/circle></div>
  </div>
</template>